<template>
  <div class="container-register">
      <div :style="'display:' + (!confirmView ? 'block' : 'none')">
          <div class="steps">
                    <el-steps :active="active"  align-center >
                        <el-step title="填写个人信息"></el-step>
                        <el-step title="填写企业信息"></el-step>
                    </el-steps>
            </div>
            <div class="view" :style="'display:' + (active == 0 ? 'block' : 'none')">
                    <div class="title">
                        <h2>填写个人信息</h2>
                        <h3>通过身份证验证您的身份，同时您的信息将会得到绝对的保护，仅限用于招聘</h3>
                    </div>
                    <div class="form form-personal">
                        <el-form ref="form" label-position="right" label-width="120px">
                            <el-form-item label="姓名：">
                                <el-input value=""></el-input>
                            </el-form-item>
                            <el-form-item label="身份证号：">
                                <el-input value=""></el-input>
                            </el-form-item>
                            <el-form-item label="上传身份证照片：">
                                <div class="upload-card-group">
                                    <div class="item">
                                        <el-upload
                                        accept='.jpg,.png,.jpeg'
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            list-type="picture-card">
                                            <img src="../../assets/images/card1.png">
                                            <div class="el-upload__text">上传身份证正面</div>
                                        </el-upload>
                                        <el-dialog>
                                            <img width="100%"  alt="">
                                        </el-dialog>
                                    </div>
                                    <div class="item">
                                        <el-upload
                                        accept='.jpg,.png,.jpeg'
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            list-type="picture-card">
                                                <img src="../../assets/images/card2.png">
                                                <div class="el-upload__text">上传身份证背面面</div>
                                            </el-upload>
                                            <el-dialog>
                                            <img width="100%" alt="">
                                        </el-dialog>
                                    </div>
                                </div>
                            </el-form-item>
                            
                        </el-form>
                        <div class="button-group">
                            <span @click="nextStep">下一步</span>
                        </div>
                    </div>
            </div>

            <div class="view" :style="'display:' + (active > 0 ? 'block' : 'none')">
                    <div class="title">
                        <h2>填写企业信息</h2>
                    </div>
                    <div class="form form-enterprise">
                        <el-form ref="form" label-position="right" label-width="120px">
                            <el-form-item label="企业logo：">
                                <div class="upload">
                                    <el-upload
                                    accept='.jpg,.png,.jpeg'
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        list-type="picture-card">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog>
                                        <img width="100%" alt="">
                                    </el-dialog>
                                    <div class="explain">
                                        <p>上传logo请小于300KB</p>
                                        <p>尺寸：200px*200px</p>
                                    </div>
                                </div>
                            </el-form-item>
                            <el-form-item label="企业名称：" required>
                                <el-input></el-input>
                            </el-form-item>
                            <el-form-item label="企业所在地： " required>
                                <el-select clearable v-model="select" placeholder="请选择">
                                    <el-option label="区域一" value="1"></el-option>
                
                                </el-select>
                            </el-form-item>
                            <el-form-item label="所属行业：" required>
                                <el-select clearable  v-model="select" placeholder="请选择">
                                    <el-option label="区域一" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="企业性质：" required>
                                <el-select clearable  v-model="select" placeholder="请选择">
                                    <el-option label="区域一" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="对公账户：" >
                                <el-input></el-input>
                            </el-form-item>
                            <el-form-item label="开户行全称：" >
                                <el-input></el-input>
                            </el-form-item>
                            <el-form-item label="上传营业执照：" required>
                                <div class="upload-number-text">
                                    <span>请上传【营业执照】照片（0/5）</span>
                                    <span class="see-examples">查看上传示例</span>
                                </div>
                                <div class="upload">
                                    <el-upload
                                    accept='.jpg,.png,.jpeg'
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        list-type="picture-card">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog>
                                        <img width="100%" alt="">
                                    </el-dialog>
                                    <div class="explain">
                                        <p>支持jpg/jpeg/gif/png图片文件</p>
                                        <p>图片大小需小于300KB</p>
                                    </div>
                                </div>
                            </el-form-item>
                        </el-form>
                        <div class="button-group">
                            <span @click="backStep()" class="primary">返回上一步</span>
                            <span @click="confirmView = true;active = 2">提交审核</span>
                        </div>
                    </div>
            </div>
      </div>
      <el-dialog title="注册信息核对" :visible.sync="confirmView" width="980px" top="80px" custom-class='register-confirm-dialog' :before-close="confirmViewClose">
            <div class="dialog-content">
                <div class="title">
                    <span class="icon"></span>
                    <span>个人信息</span>
                </div>
                <div class="info">
                    <div class="item">
                        <span class="item-title">姓名：</span>
                        <span>张甜甜</span>
                    </div>
                    <div class="item">
                        <span class="item-title">身份证号：</span>
                        <span>410488199909099999</span>
                    </div>
                    <div class="item">
                        <span class="item-title">上传身份证照片：</span>
                        <div class="card-group">
                            <div class="card-img">
                                <img src="../../assets/images/card1.png" alt="">
                            </div>
                            <div class="card-img">
                                <img src="../../assets/images/card2.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="title title-enterprise">
                    <span class="icon"></span>
                    <span>企业信息</span>
                </div>
                <div class="info info-enterprise">
                    <div class="item item-logo">
                        <span class="item-title">企业logo：</span>
                        <div class="logo">
                            <img src="" alt="">
                        </div>
                    </div>
                    <div class="item">
                        <span class="item-title">企业名称：</span>
                        <span>河南省投资集团有限公司</span>
                    </div>
                    <div class="item">
                        <span class="item-title">企业所在地：</span>
                        <span>河南省郑州市</span>
                    </div>
                    <div class="item">
                        <span class="item-title">所属行业：</span>
                        <span>金融</span>
                    </div>
                    <div class="item">
                        <span class="item-title">企业性质：</span>
                        <span>国企</span>
                    </div>
                    <div class="item">
                        <span class="item-title">对公账户：</span>
                        <span>45687777</span>
                    </div>
                    <div class="item">
                        <span class="item-title">开户行全称：</span>
                        <span>中原银行郑州市花园路支行</span>
                    </div>
                    <div class="item">
                        <span class="item-title">上传营业执照：</span>
                        <div class="license">
                            <img src="" alt="">
                        </div>
                    </div>
                </div>
                <div class="button-group">
                    <span @click="confirmView = false;active = 1" class="primary">返回修改</span>
                    <span @click="confirmView = false">确认提交</span>
                </div>
            </div>
        </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'register',
  components: {},
  props: {},
  data() {
    return {
        active: 0,
        select: '',
        confirmView: false // 确认弹窗
    };
  },
// 方法
  methods: {
      // 下一步
      nextStep(){
          if(this.active < 2){
            this.active = this.active + 1
          }
      },
      // 上一步
      backStep(){
          this.active = 0
      },
      confirmViewClose(){
          this.confirmView = false;
          this.active = 1
      }
  },
// 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
// 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
// 销毁
  destroyed() {}
};
</script>
<style lang="scss">
    html{background: #F6F6F6;}
    .container-register{height: 100%;
        .button-group{margin-left: 118px;
            span{font-size:14px;font-weight:400;text-align:center;color:#FFFFFF;width:160px;display:inline-block;background:#348CE8;border-radius:3px;line-height:44px;cursor:pointer;margin-right: 30px;}
            span:last-child{margin-right: 0;}
            .primary{
                background: #fff;color: #666666;border: 1px solid #E6E6E6;
            }
        }
        .steps{
            width:1000px;margin:auto;padding:0 294px;padding-top: 62px;
        }
        .view{width: 1000px; margin:40px auto;background: #fff;
            .title{padding-top:54px;padding-left:96px;
                h2{font-size:20px;color:#000000; margin: 0;}
                h3{font-size:14px;font-weight:400;color:#999999;margin: 0;margin-top: 10px;}
            }
            .form{ 
                .el-form-item__label{padding: 0;font-weight:400;color:#666666;}
                
                .button-group{margin-left: 118px;}
            }
            .form-personal{padding: 65px 286px 194px 239px ;
                .upload-card-group{display: flex; justify-content: space-between;
                    .item{float: left;
                        .el-upload--picture-card{width: 170px; height: 120px;background: #EFEFEF;line-height: 0;
                            img{margin-top: 20px;margin-bottom: 10px;}
                            .el-upload__text{font-size:14px;font-weight:400;line-height:60px;color:#666666;line-height:14px;}
                        }
                    }
                }
            }
            .form-enterprise{padding-top: 35px; padding-left: 185px; padding-right: 332px; padding-bottom: 38px;
                .el-select{width: 100%;}
                .upload-number-text{
                    margin-top: -14px;font-size:14px;font-weight:400;line-height:28px;color:#666666;
                    .see-examples{color: #348CE8;margin-left: 15px;cursor: pointer;}
                }
                .upload{display:flex;align-items:center;
                    .el-upload--picture-card{
                        width: 90px; height: 90px;line-height: 90px;
                    }
                    p{font-size:12px;font-weight:400;line-height:24px;color:#666666; margin-left: 10px;}
                }
                
            }
        }
        .register-confirm-dialog{margin-bottom: 63px;
            .el-dialog__body{padding: 0;border-top: 1px solid #ECECEC;}
            .dialog-content{
                margin: 20px 40px;display: inline-block;
                .title{font-size:16px;font-weight:bold;line-height:21px;color:#333333; display: flex; align-items: center;
                    .icon{width:4px;height:16px;background:#348CE8;display: inline-block;margin-right: 15px;}
                }
                .title-enterprise{
                    margin-top: 30px;
                }
                .info-enterprise{margin-top: 18px !important;}
                .info{margin-top:40px;margin-left:249px; display: inline-block;
                    .item{font-size:14px;font-weight:400;line-height:40px;color:#666666;
                        .item-title{width:120px;display:inline-block;text-align:right;margin-right:8px;}
                        .card-group{
                            float: right; display: flex;
                            .card-img{
                                display: flex; align-items: center; justify-content: center;
                                width: 170px;height: 100px;background-color: #EFEFEF;margin-right: 17px;
                            }
                            .card-img:last-child{margin-right: 0;}
                        }
                        .logo{
                            width: 60px; height: 60px;
                        }
                        .license{
                            width: 170px;height: 100px;background-color: #EFEFEF;float: right;
                        }
                    }
                    .item-logo{
                        display: flex;align-items: center;
                    }
                }   
                .button-group{margin-left: 315px;margin-top: 22px;}
                
            }
        }
        
    }
</style>